<template>
  <div>
    <table>
      <LinxiTwo
        v-for="(item, index) in goodsArr"
        :key="index"
        :obj="item"
        @add="item.count = $event - 0"
      ></LinxiTwo>
    </table>
    <p>总数量{{ todal }}</p>

    <hr />
    <h3>商品清单如下</h3>
    <ul>
      <li v-for="(item, index) in foodList" :key="index">
        {{ item.shopName }}{{ item.price }}/份
      </li>
    </ul>
    <h3>请选择购买数量</h3>
    <LianxiThree
      v-for="(item, index) in foodList"
      :key="index"
      :obj="item"
      @change-unm="item.count = $event"
    ></LianxiThree>
    <p>总价为：{{ todalPrice }}</p>

    <hr />

    <div>
      <MySubject
        v-for="(item, index) in arr"
        :key="index"
        :obj="item"
        @tijiao="item.result = $event"
      ></MySubject>
    </div>
    <div>
      <MyFlag v-for="(item,index) in arr" :key="index" :obj="item" :index="index"></MyFlag>
    </div>
  </div>
</template>

<script>
import LinxiTwo from "./components/lianxi-two.vue";
import LianxiThree from "./components/lianxi-three.vue";
import MyFlag from "./components/MyFlag.vue";
import MySubject from "./components/MySubject.vue";
export default {
  components: {
    LinxiTwo,
    LianxiThree,
    MyFlag,
    MySubject,
  },
  props: {},
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      foodList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      arr: [],
    };
  },
  computed: {
    todal() {
      return this.goodsArr.reduce((sum, item) => sum + item.count, 0);
    },
    todalPrice() {
      return this.foodList.reduce(
        (sum, item) => sum + item.count * item.price,
        0
      );
    },
  },
  watch: {},
  created() {
    const arr = [];
    for (let i = 0; i < 5; i++) {
      const left = Math.floor(Math.random() * 11);
      const right = Math.floor(Math.random() * 11);
      arr.push({ left, right, result: null });
    }
    this.arr = arr;
  },

  methods: {},
};
</script>

<style scoped></style>
